<template>
	<view class="recommend">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/banner1.jpg" alt="" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/banner2.jpg" alt="" />
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/img/banner3.jpg" alt="" />
				</view>
			</swiper-item>
		</swiper>
	
		<!--  三个小图标 数据 policyDescList-->
		<view class="policyList" v-if="indexData.policyDescList">
			<view class="policItem" v-for="(item,index) in indexData.policyDescList" :key="index">
				<image :src="item.icon" mode=""></image>
				<text class="desc">{{item.desc}}</text>
			</view>
		</view>
	
		<!-- 10个导航图标，数据 kingKongList-->
		<view class="kingKongList" v-if="indexData.kingKongModule">
			<view class="kingKongItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				<image class="kingKongImg" :src="item.picUrl" mode=""></image>
				<view class="kingKongDesc">{{item.text}}</view>
			</view>
		</view>
		
		<!-- 分类区 数据 categoryModule-->
		<view class="categoryList" v-if="indexData.categoryModule">
			<view class="categoryItem" v-for="(item,index) in indexData.categoryModule" :key="index">
				<!-- 大图 -->
				<image class="categoryImg" :src="item.titlePicUrl" mode=""></image>
				<!-- 滑块 -->
				<scroll-view class="categoryScroll" scroll-x="true" enable-flex>
					<view class="goodsItem" v-for="goosItem in item.itemList" :key="goosItem.id">
						<image class="goodsImg" :src="goosItem.showPicUrl" mode=""></image>
						<text class="goodsText">{{goosItem.name}}</text>
					</view>
				</scroll-view>
				
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			...mapState('home',['indexData'])
		}
	}
</script>

<style lang="stylus">
	.recommend
		.swiper
			height: 350rpx
			.swiper-item
				height: 350rpx
				width: 100%
				image
					height: 350rpx
					width: 100%
		.policyList
			display: flex
			margin: 10rpx 0
			.policItem
				flex: 1
				text-align: center
				image
					width: 40rpx
					height: 40rpx
					vertical-align: middle    //图片居中对齐
				.desc
					font-size: 26rpx
		
		.kingKongList
			margin: 10rpx 0
			display: flex
			//flex: wrap  h5
			flex-wrap: wrap
			.kingKongItem
				width: 20%
				text-align: center
				.kingKongImg
					width: 100rpx
					height: 100rpx
				.kingKongDesc
					font-size: 24rpx
		.categoryList
			.categoryItem
				margin: 10rpx 0
				.categoryImg
					height: 370rpx
					width: 100%
				.categoryScroll
				//注意一定要给滑块设置高度，否则撑满全屏
					display: flex
					height: 300rpx
					.goodsItem
						height: 300rpx
						margin: 0 5rpx
						.goodsImg
							width: 200rpx
							height: 200rpx
							background-color: #f5f5f5
						.goodsText
							//换行 ，超过2行。。。
							font-size: 26rpx
							white-space: pre-wrap
							overflow: hidden
							text-overflow: ellipsis
							display: -webkit-box
							-webkit-box-orient: vertical
							-webkit-line-clamp: 2
					
			
				
	
</style>
